<!-- src/views/Visitor.vue -->
<template>
  <div class="visitor-container">
    <!-- 顶部导航栏 -->
    <Header />

    <!-- 轮播大图 Banner -->
    <div class="banner-section">
      <el-carousel height="350px" indicator-position="outside">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <div class="banner-item" @click="goDetail(item.id)">
            <img :src="item.mainImage" class="banner-img" />
            <div class="banner-info">
              <div class="banner-title">{{ item.name }}</div>
              <div class="banner-price">￥{{ item.price }}</div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 热销商品区 -->
    <div class="products-section">
      <h2 class="section-title">热销商品</h2>
      <el-row :gutter="20" justify="start">
        <el-col v-for="item in sortedProducts" :key="item.productId" :xs="24" :sm="12" :md="8" :lg="6">
          <el-card class="product-card" shadow="hover" @click="goDetail(item.productId)" style="cursor: pointer">
            <img :src="item.mainImage || defaultImg" class="product-img" alt="商品图片" />
            <div class="product-info">
              <div class="product-name">{{ item.name }}</div>
              <div class="product-price">￥{{ item.price }}</div>
              <div class="product-meta">
                <span class="product-sales">已售 {{ item.sales || 0 }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue';
import { ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/utils/request';
import { useRouter } from 'vue-router';

const router = useRouter();
const products = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(8);
const defaultImg = 'https://img.yzcdn.cn/vant/cat.jpeg';

// 轮播图数据
const bannerList = ref([]);

// 动态获取轮播图商品
const fetchBanner = async () => {
  try {
    const res = await request.get('/api/products/banner');
    bannerList.value = res || [];
  } catch (e) {
    ElMessage.error('轮播图加载失败');
  }
};

// 按销量降序排序
const sortedProducts = computed(() => {
  return [...products.value].sort((a, b) => (b.sales || 0) - (a.sales || 0));
});

const fetchProducts = async () => {
  try {
    const res = await request.get('/api/products', {
      params: {
        page: page.value,
        pageSize: pageSize.value,
        status: 1
      }
    });
    products.value = res.list || [];
    total.value = res.total || 0;
  } catch (e) {
    ElMessage.error('商品加载失败');
  }
};

const handlePageChange = (val) => {
  page.value = val;
  fetchProducts();
};

const goLogin = () => {
  ElMessage.info('请先登录后再加入购物车');
};

const goDetail = (id) => {
  router.push(`/products/${id}`);
};

const goMyOrders = () => {
  router.push('/profile/orders');
};

onMounted(() => {
  fetchBanner();
  fetchProducts();
});
</script>

<style scoped>
.visitor-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8fafc;
}

.banner-section {
  width: 1100px;
  max-width: 100vw;
  margin: 32px auto 0 auto;
  display: flex;
  justify-content: center;
}
:deep(.el-carousel) {
  width: 1100px;
}
.banner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 350px;
  position: relative;
}
.banner-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.banner-info {
  position: absolute;
  left: 30px;
  bottom: 30px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 20px;
}
.banner-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}
.banner-price {
  font-size: 22px;
  color: #ffd700;
}
.products-section {
  max-width: 1400px;
  width: 100%;
  margin: 40px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-title {
  font-size: 28px;
  color: #1a365d;
  margin-bottom: 30px;
  text-align: left;
  width: 100%;
}
.el-row {
  width: 100%;
  justify-content: flex-start;
}
.product-card {
  min-width: 220px;
  max-width: 260px;
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
.product-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}
.product-info {
  padding: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.product-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}
.product-price {
  font-size: 18px;
  color: #e53935;
  font-weight: bold;
  margin-bottom: 8px;
}
.product-meta {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 8px;
}
.product-sales {
  font-size: 14px;
  color: #ff9800;
  font-weight: 500;
}
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
</style>